<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 1000px;
        height: 600px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
      }
      .btns {
        position: absolute;
        bottom: 20px;
        width: 100%;
        height: 20px;
        background: #fff;
        z-index: 999;
      }
      .btns button {
        border-radius: 50%;
      }
      .content {
        height: 600px;
        text-align: center;
        line-height: 257px;
        font-size: 100px;
        position: relative;
      }
      .box {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #000;
        color: #fff;
        opacity: 0;
        /* transform: rotate(0deg); */
        transition: opacity 1s, transform 1s;
      }
      .box img {
        width: 100%;
        height: 100%;
      }
      button.active {
        color: aliceblue;
        background: black;
      }
      .box.active {
        display: block;
        z-index: 1;
        opacity: 1;
        /* transform: rotate(360deg); */
      }
      #left_btn,
      #right_btn {
        position: absolute;
        top: 50%;
        margin-top: -10px;
        z-index: 999;
      }
      #right_btn {
        right: 0;
      }

      ul {
        position: absolute;
        left: 380px;
        bottom: 5px;
        width: 100%;
        height: 20px;
        z-index: 999;
      }
      li {
        font-weight: bold;
        margin-left: 15px;
        text-align: center;
        line-height: 26px;
        background: white;
        border-radius: 50%;
        width: 26px;
        list-style: none;
        float: left;
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ul>
        <li data-index="0" class="btn active">1</li>
        <li data-index="1" class="btn">2</li>
        <li data-index="2" class="btn">3</li>
      </ul>
      <div class="content">
        <div class="box active">
          <img src="./img/banner-失落方舟.jpg" alt="" />
        </div>
        <div class="box">
          <img src="./img/banner-永劫无间.jpeg" alt="" />
        </div>
        <div class="box">
          <img src="./img/banner-霍格沃茨遗产.jpg" alt="" />
        </div>
        <!-- <div class="box">
          <img src="./img/banner-正当防卫Ⅳ.jpg" alt="" />
        </div>
        <div class="box">
          <img src="./img/banner-CS GO.jpg" alt="" />
        </div> -->
      </div>
      <button id="left_btn">left</button>
      <button id="right_btn">right</button>
    </div>

    <script>
      var ele_btns = document.querySelectorAll(".btn");

      var ele_boxs = document.querySelectorAll(".box");
      var ele_left = document.getElementById("left_btn");
      var ele_right = document.getElementById("right_btn");
      var ele_container = document.querySelector(".container");
      var index = null;

      //轮播图下方按钮
      for (var i = 0; i < ele_btns.length; i++) {
        ele_btns[i].addEventListener("click", function () {
          var that = this;
          move(this, 1000, "left", function () {
            console.log("运动结束！", this);
          });

          function move(ele, target, dir, cd) {
            var timer1 = setInterval(function () {
              var num = parseInt(getComputedStyle(ele, null)[dir]);
              console.log(num);
              if (num == target) {
                cd && cd();
                clearInterval(timer1);
              }
              num += 10 * (target > num ? 1 : -1);
              ele.style[dir] = num + "px";
            }, 10);
          }
          //调用下方函数移除所有的active属性
          removeClass(ele_btns, "active");
          removeClass(ele_boxs, "active");
          for (var j = 0; j < ele_btns.length; j++) {
            //确定点击的按钮对应的图片
            if (this === ele_btns[j]) {
              break;
            }
          }
          //将对应的图片的下标赋值给全局变量,(对应下标即获取的ele_boxs中的下标)
          index = j;
          //给当前点击的按钮添加active属性
          this.className += " active";
          //给当前对应的按钮的图片添加active属性
          ele_boxs[index].className += " active";
        });
      }

      //左边按钮
      ele_left.addEventListener("click", function () {
        //调用下方函数移除所有的active属性
        removeClass(ele_btns, "active");
        removeClass(ele_boxs, "active");
        //向左切换，即下标递减
        index--;
        //当下标小于0时从左后；面的图片重新开始
        if (index < 0) {
          index = ele_btns.length - 1;
        }
        //对应的按钮及图片添加active
        ele_btns[index].className += " active";
        ele_boxs[index].className += " active";
      });

      ele_right.addEventListener("click", function () {
        removeClass(ele_btns, "active");
        removeClass(ele_boxs, "active");
        index++;
        if (index > ele_btns.length - 1) {
          index = 0;
        }
        ele_btns[index].className += " active";
        ele_boxs[index].className += " active";
      });

      //定时自动轮播图片
      var timer = null;
      timer = setInterval(function () {
        removeClass(ele_btns, "active");
        removeClass(ele_boxs, "active");
        index++;
        if (index > ele_btns.length - 1) {
          index = 0;
        }
        ele_btns[index].className += " active";
        ele_boxs[index].className += " active";
      }, 3000);

      //当鼠标移到图片上方时，停止自动轮播
      ele_container.addEventListener("mouseover", function () {
        clearInterval(timer);
      });

      //当鼠标从图片上方移走时，开启自动轮播
      ele_container.addEventListener("mouseout", function () {
        timer = setInterval(function () {
          removeClass(ele_btns, "active");
          removeClass(ele_boxs, "active");
          index++;
          if (index > ele_btns.length - 1) {
            index = 0;
          }
          ele_btns[index].className += " active";
          ele_boxs[index].className += " active";
        }, 3000);
      });

      //清除所有的active属性
      function removeClass(ele, class_name) {
        for (var i = 0; i < ele.length; i++) {
          //将所有的属性名切割成数组
          ele_class_arr = ele[i].className.split(" ");
          //如果数组中存在想要删除的属性(即上方的active属性)，就进入if中
          if (ele_class_arr.indexOf(class_name) !== -1) {
            //删除掉active属性
            ele_class_arr.splice(ele_class_arr.indexOf(class_name), 1);
          }
          //将删除掉active属性的数组重新转换成字符串
          ele_class_str = ele_class_arr.join(" ");
          //将转换完成之后的字符串赋予给对应的DOM的属性中
          ele[i].className = ele_class_str;
        }
      }
    </script>
  </body>
</html>
